<template>
  <div>
    <!-- 输入消息的文本框 -->
    <input type="text" v-model="message" placeholder="输入消息" />
    <!-- 发送消息的按钮 -->
    <button @click="sendMessage">发送</button>
    <!-- 用于展示聊天消息的无序列表 -->
    <ul>
      <!-- 循环渲染聊天消息 -->
      <li v-for="chat in chats" :key="chat.id">
        <!-- 显示头像的图片标签 -->
        <img :src="getAvatarUrl(chat.avatar)" alt="头像" width="30" height="30" />
        <!-- 显示聊天消息文本 -->
        <span>{{ chat.message }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 模拟头像数据，这里列出了可用的头像图片文件名
const avatars = [
  'avatar1.jpg',
  'avatar2.jpg',
  'avatar3.jpg',
];

// 定义消息数据，使用 ref 创建响应式数据
const chats = ref([]);
const message = ref('');

// 发送消息的函数
const sendMessage = () => {
  // 如果输入的消息不为空（去除两端空格后判断）
  if (message.value.trim()) {
    // 创建一个新的聊天对象
    const newChat = {
      id: Date.now(), // 使用当前时间戳作为消息的唯一标识
      message: message.value, // 将输入的消息文本作为消息内容
      // 从 avatars 数组中随机选择一个头像文件名作为头像
      avatar: avatars[Math.floor(Math.random() * avatars.length)],
    };
    // 将新的聊天对象添加到 chats 数组中
    chats.value.push(newChat);
    // 清空输入框
    message.value = '';
    // 将最新的聊天消息保存到本地存储
    saveChatsToLocalStorage();
  }
};

// 根据头像文件名生成对应的 URL 的函数
const getAvatarUrl = (avatarFileName: string) => {
  // 假设头像图片存储在 public 目录下的 images 文件夹中
  // 返回对应的 URL 路径格式，以便在页面中正确显示头像
  return `/images/${avatarFileName}`;
};

// 将聊天消息保存到本地存储的函数
const saveChatsToLocalStorage = () => {
  localStorage.setItem('chats', JSON.stringify(chats.value));
};

// 在页面加载时从本地存储中恢复聊天消息
onMounted(() => {
  const storedChats = localStorage.getItem('chats');
  if (storedChats) {
    chats.value = JSON.parse(storedChats);
  }
});
</script>